<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>树组件</title>
    <link rel="stylesheet" href="{{ url('admin/lib/layui/css/layui.css') }}">
</head>
<body>
{{--<div id="test1">111</div>--}}
<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据</button>
    <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
    <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常规用法</legend>
    <div id="test12">11</div>
</fieldset>

{{--<div id="test9" class="demo-tree demo-tree-box" style="width: 200px; height: 300px; overflow: scroll;"></div>--}}
<script src="{{url('admin/lib/layui/layui.all.js')}}"></script>
<script>
    layui.use(['tree', 'util'], function(){
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util
        //渲染
        data1 = [{
            title: '江西'
            ,id: 1
            ,children: [{
                title: '南昌'
                ,id: 1000
                ,children: [{
                    title: '青山湖区'
                    ,id: 10001
                },{
                    title: '高新区'
                    ,id: 10002
                }]
            },{
                title: '九江'
                ,id: 1001
            },{
                title: '赣州'
                ,id: 1002
            }]
        },{
            title: '广西'
            ,id: 2
            ,children: [{
                title: '南宁'
                ,id: 2000
            },{
                title: '桂林'
                ,id: 2001
            }]
        },{
            title: '陕西'
            ,id: 3
            ,children: [{
                title: '西安'
                ,id: 3000
            },{
                title: '延安'
                ,id: 3001
            }]
        }]

        //基本演示
        tree.render({
            elem: '#test12' //默认是点击节点可进行收缩
            ,data: data1
        });

    });
</script>
</body>
</html>
